<template>
  <div class="annotator-container">
    <div class="toolbar">
      <div class="tool-group">
        <label for="image-upload" class="tool-button">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <polyline points="17 8 12 3 7 8" />
            <line x1="12" y1="3" x2="12" y2="15" />
          </svg>
          导入图片
        </label>
        <input id="image-upload" type="file" @change="handleImageUpload" accept="image/*" />
      </div>

      <div class="tool-group">
        <button class="tool-button" @click="undo" :disabled="!canUndo" title="撤销 (Ctrl+Z)">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M3 10v6h6" />
            <path
              d="M21.73 12.25a10.14 10.14 0 0 1-1.73 6.25 10.14 10.14 0 0 1-6.25 4 10.14 10.14 0 0 1-10.25-10.14 10.14 10.14 0 0 1 4-6.25 10.14 10.14 0 0 1 6.25-1.73 10.14 10.14 0 0 1 7.75 4.25"
            />
            <polyline points="8 10 3 10 3 15" />
          </svg>
        </button>
        <button class="tool-button" @click="redo" :disabled="!canRedo" title="重做 (Ctrl+Y)">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M21 10v6h-6" />
            <path
              d="M2.27 12.25a10.14 10.14 0 0 1 1.73-6.25 10.14 10.14 0 0 1 6.25-4 10.14 10.14 0 0 1 10.25 10.14 10.14 10.14 0 0 1-4 6.25 10.14 10.14 0 0 1-6.25 1.73 10.14 10.14 0 0 1-7.75-4.25"
            />
            <polyline points="16 10 21 10 21 15" />
          </svg>
        </button>
      </div>

      <div class="tool-group">
        <button
          class="tool-button"
          :class="{ active: currentTool === 'pencil' }"
          @click="setTool('pencil')"
          title="铅笔"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
            <path d="m15 5 4 4" />
          </svg>
        </button>
        <button
          class="tool-button"
          :class="{ active: currentTool === 'rectangle' }"
          @click="setTool('rectangle')"
          title="矩形"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
          </svg>
        </button>
        <button
          class="tool-button"
          :class="{ active: currentTool === 'text' }"
          @click="setTool('text')"
          title="文字"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M17 6.1H3" />
            <path d="M21 12.1H3" />
            <path d="M15.1 18H3" />
            <path d="M7 4v16" />
            <path d="M17 4v16" />
          </svg>
        </button>
      </div>

      <div class="tool-group">
        <button
          v-for="width in lineWidthOptions"
          :key="`width-${width}`"
          class="tool-button line-width-button"
          :class="{ active: currentLineWidth === width }"
          @click="setLineWidth(width)"
          :title="`线宽: ${width}px`"
        >
          <span
            class="line-width-dot"
            :style="{ width: `${width}px`, height: `${width}px` }"
          ></span>
        </button>
      </div>

      <div class="tool-group">
        <button
          v-for="color in presetColors"
          :key="color"
          class="color-button"
          :style="{ backgroundColor: color }"
          :class="{ active: currentColor === color }"
          @click="setColor(color)"
        ></button>
        <input type="color" v-model="customColor" class="color-picker" title="自定义颜色" />
      </div>

      <div class="tool-group">
        <el-button @click="exportImage">导出图片</el-button>
        <el-button @click="exportAsBase64">Base64</el-button>
        <el-button
          v-for="(item, index) in props.buttons"
          :key="index"
          :type="item.type"
          :icon="item.icon"
          @click="item.action"
          >{{ item.label }}</el-button
        >
      </div>
    </div>
    <div class="canvas-wrapper">
      <canvas ref="canvasRef"></canvas>
      <div class="canvas-info">提示: 使用鼠标中键或按住Alt键拖拽可平移画布，滚轮可缩放。</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useImageAnnotator } from '@/hooks/useImageAnnotator.ts'
import type { ImageAnnotatorButtons } from '@/types' // 确保路径正确

const canvasRef = ref<HTMLCanvasElement | null>(null)
const emit = defineEmits(['export-base64', 'generate-base64'])



const props = defineProps<{
  buttons?: Array<ImageAnnotatorButtons>
}>()

// 调用Composable，获取所有状态和方法
const {
  currentTool,
  currentColor,
  customColor,
  presetColors,
  currentLineWidth,
  lineWidthOptions,
  canUndo,
  canRedo,
  setTool,
  setColor,
  setLineWidth,
  handleImageUpload,
  exportImage,
  exportAsBase64,
  generateAsBase64,
  undo,
  redo,
  getUsedColors
} = useImageAnnotator(canvasRef, emit)

defineExpose({
  currentTool,
  currentColor,
  customColor,
  presetColors,
  currentLineWidth,
  lineWidthOptions,
  canUndo,
  canRedo,
  setTool,
  setColor,
  setLineWidth,
  handleImageUpload,
  exportImage,
  exportAsBase64,
  generateAsBase64,
  undo,
  redo,
  getUsedColors
})
</script>

<style scoped>
/* (样式与之前基本相同, 增加了一些提示和禁用按钮的样式) */
.annotator-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f9fafb;
}

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px;
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.tool-group::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 1px;
  background-color: #e5e7eb;
}

.tool-group:last-child::after {
  display: none;
}

.tool-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  color: #374151;
}
.tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.tool-button:disabled:hover {
  background-color: #fff;
}

.tool-button svg {
  color: #6b7280;
}

.tool-button:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.tool-button.active {
  background-color: #e0e7ff;
  border-color: #3b82f6;
  color: #3b82f6;
}
.tool-button.active svg {
  color: #3b82f6;
}

#image-upload {
  display: none;
}

.line-width-button {
  padding: 6px;
  min-width: 38px;
  height: 38px;
}
.line-width-dot {
  display: block;
  background-color: #374151;
  border-radius: 50%;
}
.line-width-button.active .line-width-dot {
  background-color: #3b82f6;
}

.color-button {
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px #d1d5db;
  transition: transform 0.2s ease;
}
.color-button:hover {
  transform: scale(1.1);
}
.color-button.active {
  box-shadow: 0 0 0 2px #3b82f6;
}

.color-picker {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-picker::-webkit-color-swatch {
  border: 1px solid #d1d5db;
  border-radius: 50%;
}

.export-button {
  background-color: #22c55e;
  color: #fff;
  border-color: #16a34a;
}
.export-button svg {
  color: #fff;
}
.export-button:hover {
  background-color: #16a34a;
}

.base64-button {
  background-color: #6366f1;
  color: #fff;
  border-color: #4f46e5;
}
.base64-button svg {
  color: #fff;
}
.base64-button:hover {
  background-color: #4f46e5;
}

.canvas-wrapper {
  position: relative;
  flex-grow: 1;
  width: 100%;
  background-color: #ffffff;
  overflow: hidden;
  cursor: default; /* 默认光标 */
}
canvas {
  display: block;
}
.canvas-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none; /* 让鼠标事件穿透 */
}
</style>
